<template>
	<view class="">
		<view class="content u-skeleton">
			<!-- head搜索区域 -->
			<view class="head">
				<view class="search ">
					<image src="../../static/icon/address2.png" class="u-skeleton-circle"></image>
					<image src="../../static/logo/white.png" class="u-skeleton-circle"></image>
					<view class="search_input u-skeleton-fillet">
						<u-search @search="searchEvent" shape="square" action-text="" :action-style="{width: 0, height: 0}" bg-color="#fff"
							:input-style="{fontSize: '20rpx'}"></u-search>
					</view>
					<image src="../../static/icon/dp.png" class="dp u-skeleton-circle"></image>
				</view>
				<view class="cate">
					<view class="catenavtab u-skeleton-rect">
						<u-tabs ref="tabs" :list="catenav" name="catename" bar-width="30" bar-height="8"
							active-color="white" bg-color="111" font-size="28" :show-bar="showBar"
							inactive-color="white" :is-scroll="true" :current="currentnav" @change="changecurrent">
						</u-tabs>
					</view>
					<view class="category u-skeleton-rect">
						<image src="../../static/icon/cate.png"></image>
						<text>分类</text>
					</view>
				</view>
			</view>

			<!-- swiper区域  使用插件实现-->
			<view class="u-skeleton-fillet swiper_banner">
				<u-swiper :list="bannerlist" name="img" :effect3d="true" height="390" @click="goActive"></u-swiper>
			</view>
			<!-- 快速导航区域 -->
			<view class="quicknav">
				<view class="row" v-for="(item, index) in quicknav" :key="index" hover-class="touchOpacity">
					<image :src="item.src" class="u-skeleton-circle"></image>
					<text class="u-skeleton-rect">{{ item.text }}</text>
				</view>
			</view>

			<!-- 秒杀商品推荐区域 -->
			<view class="seckill">
				<!-- 秒杀左侧区域 -->
				<view class="leftseckill u-skeleton-rect">
					<view class="title " hover-class="touchOpacity">
						<text>限时秒杀</text>
						<text>查看更多 ></text>
					</view>
					<view class="left_seckill_info">
						<u-count-down bg-color="#5D7E37" color="white" ref="uCountDown" :timestamp="seckill.endtime"
							:autoplay="true" font-size="20" height="30"></u-count-down>
					</view>
					<image :src="seckill.img" mode="widthFix" class="seckill_img"></image>
				</view>
				<!-- 秒杀右侧区域 -->
				<view class="rightseckill">
					<view class="top u-skeleton-rect">
						<view>品牌上新</view>
						<view>9点整，抢大牌</view>
						<view hover-class="touchOpacity">疯抢红包 ></view>
					</view>
					<view class="bottom u-skeleton-rect">
						<view>日用好物</view>
						<view>愿君多采撷</view>
						<view hover-class="touchOpacity">塞满奖券 ></view>
					</view>
				</view>
			</view>

			<!-- 推荐商品区域 -->
			<view class="tuijian  u-skeleton-rect">
				<!-- 标题区域 -->
				<view class="tuijian_title">
					<text :class="tjActiveIndex == 0 ? 'tuijian_active' : ''">双十一尖货预购</text>
					<text :class="tjActiveIndex == 1 ? 'tuijian_active' : ''">畅购全球</text>
				</view>
				<!-- 滚动商品区域 -->
				<scroll-view scroll-x class="tuijian_scroll_x">
					<view class="tuijian_scroll_x_row" v-for="(item, index) in tuijianshop" :key="index"
						hover-class="touchOpacity">
						<image :src="item"></image>
					</view>
				</scroll-view>
			</view>

			<!-- 推荐商品区域 -->
			<view class="recommendgood">
				<!-- 推荐导航 -->
				<view class="recommendnav  u-skeleton-fillet">
					<u-subsection :bold="bold" :active-color="activeColor" :current="current" :mode="mode"
						:list="['热门推荐', '上新推荐', '所有商品']" @change="currentChange"></u-subsection>
				</view>
				<view class="recommendlist">
					<view class="recommendrow u-skeleton-rect" v-for="(item, index) in shoplist" :key="index" @click="goDetails(item)">
						<!--赖加载显示图片  此处注意百度小程序问题需要指定固定高度-->
						<view class="image">
							<u-lazy-load :key="index" :image="item.img" height="200" duration="300"></u-lazy-load>
						</view>

						<view class="recommendrowinfo" hover-class="touchOpacity">
							<text>{{item.goodsname}}</text>
							<text>现价格： ￥{{item.price}}</text>
							<text>原价格：￥${{item.market_price}}</text>
							<text>立即抢购</text>
						</view>
					</view>
				</view>
				<!-- #ifdef H5 -->
				<view class="topview"></view>
				<!-- #endif -->
			</view>
		</view>
		<!--引用组件  引入骨架屏组件-->
		<!--注意： 所以要求在请求数据尚未完成时，填写一些模拟数据，才能让对应的元素有对应的尺寸和位置，供uni.createSelectorQuery查询使用 -->
		<u-skeleton bg-color="rgb(250, 250, 250)" :loading="loading" :animation="animation" :el-color="elColor"
			:border-radius="borderRadius"></u-skeleton>
	</view>
</template>
<script>
	
	import isLogin from '@/utils/ifLogin.js';
	
	export default {
		data() {
			return {
				showBar: true, //初始化分类导航底部滑块开关
				currentnav: 0, //初始化分类导航下标
				loading: false, // 是否显示骨架屏组件
				animation: true,
				elColor: '#FFC8B4',
				borderRadius: 10,
				mode: 'subsection',
				current: 0, //热推默认选项卡
				activeColor: 'orange',
				bold: true,
				change: true,
				activeIndex: 0, //默认分类下标
				catenav: [],
				bannerlist: [], //初始化轮播图数据
				quicknav: [{
						src: '../../static/icon/seckill.png',
						text: '限时秒杀'
					},{
						src: '../../static/icon/top.png',
						text: '畅销商品'
					},{
						src: '../../static/icon/brand.png',
						text: '品质大牌'
					},{
						src: '../../static/icon/selfsupport.png',
						text: '小U自营'
					},{
						src: '../../static/icon/integral.png',
						text: '积分商城'
					}],
				seckill: {}, //秒杀数据
				tuijianshop: [
					'../../static/img/pic/commodity/01.png',
					'../../static/img/pic/commodity/02.png',
					'../../static/img/pic/commodity/03.png',
					'../../static/img/pic/commodity/04.png',
					'../../static/img/pic/commodity/05.png'
				],
				hortgoods: [], // 热推商品数据
				shoplist: [], 
				tjActiveIndex: 0,
				goodsIndex: 0
			};
		},
		onLoad() {
			this.loading = false;

			// #ifdef MP-BAIDU
			this.showBar = false;
			// #endif
			
			this.request_getCate();
			this.request_getBanner();
			this.request_getseckill();
			this.request_recommend();	
		},
		
		onShow(){
			isLogin(this);
		},
		
		methods: {
			// 快速分类导航
			changecurrent(index) {
				this.currentnav = index;
				let data = this.catenav[index];
				data.type = 1;
				uni.navigateTo({
					url: `/pages/goodlist/goodlist?value=${JSON.stringify(data)}`,
				}).then(res => {
					console.log(res);
				})
			},
			// 跳转到搜索页面
			searchEvent(value) {
				uni.navigateTo({
					url: `/pages/search/search?value=${value}`
				}).then(res => {
					console.log(res);
				})
			},
			// 热推 Tab
			currentChange(index){
				this.shoplist = this.hortgoods[index].content;
			},
			// swiper 跳转
			goActive(value){
				this.bannerlist[value].type = 1;
				uni.navigateTo({
					url: `/pages/active/active?value=${JSON.stringify(this.bannerlist[value])}`
				})
			},
			// 跳转详情
			goDetails(value){
				console.log(value);
				uni.navigateTo({
					url: `/pages/gooddesc/gooddesc?value=${JSON.stringify(value)}`
				}).then(res => {
					console.log(res);
				});
			},
			
			
			/* 接口请求 */
			
			// 分类
			async request_getCate(){
				
				let [err, {data}] = await uni.request({
					url: `${this.$baseApi}getcate`
				});
				if(err){ 
					uni.showToast({
						title: '分类数据获取失败',
						icon: 'none'
					})
					return;
				}
				this.catenav = data.list;
			},
			
			// 轮播图
			async request_getBanner(){
				let [err, {data}] = await uni.request({
					url: `${this.$baseApi}getbanner`
				});
				if(err){
					uni.showToast({
						title: '轮播图数据获取失败',
						icon: 'none'
					})
					return;
				}
				data.list.forEach(item => item.img = this.$baseUrl + item.img);
				this.bannerlist = data.list;
			},
			
			// 秒杀活动
			async request_getseckill(){
				let [err, {data}] = await uni.request({
					url: `${this.$baseApi}getseckill`
				});
				// 请求出错
				if(err){
					uni.showToast({
						title: '秒杀数据获取失败',
						icon: 'none'
					})
					return;
				}
				// 数据为 null
				if(!data.list){
					uni.showToast({
						title: '暂无秒杀活动',
						icon: 'none'
					})
					return;
				}
				
				// 获取最近快要结束的秒杀活动
				let newEndtime = Math.min(...data.list.map(item => item.endtime));
				let [newData] = data.list.filter(item => item.endtime == newEndtime);
				newData.endtime = (newData.endtime - +new Date()) / 1000;
				newData.img = `${this.$baseUrl + newData.img}`;
				this.seckill = newData;
			},
			
			// 推荐商品
			async request_recommend(){
				let [err, {data}] = await uni.request({
					url: `${this.$baseApi}gethortgoods`
				});
				// 补全图片路径
				data.list.forEach(item => {
					item.content.forEach(value => {
						value.img = this.$baseUrl + value.img;
					})
				})
				this.hortgoods = data.list;
				console.log(this.hortgoods);
				this.shoplist = this.hortgoods[0].content;
			}
		}
	};
</script>

<style>
	/* 引入样式 */
	@import url('@/static/css/index.css');
</style>
